var dataType = "PM";
var dataCategory = "all";
var Pointlayer;
var overlayToolp;
var map;
var data = {
	//创建地图
	createMap:function(){
		//创建地图
		map = new ol.Map({
			// 设置地图图层
			layers: [
				new ol.layer.Tile({
					source:new ol.source.XYZ({
						//url:'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}',
						url:'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunityENG/MapServer/tile/{z}/{y}/{x}',
						wrapX:false
					}),
					projection:'EPSG:4326'
				})
			],
			// 设置显示地图的视图
			view: new ol.View({
				center: [60, 20],    // 定义地图显示中心于经度0度，纬度0度处
				zoom: 3,// 并且定义地图显示层级为5
				maxZoom: 17,  //地图的最大放大级别
				minZoom:1,   //地图的自小放大级别
				// 指定投影使用EPSG:4326
				projection: 'EPSG:4326' ,
			}),
			// 让id为map的div作为地图的容器
			target: 'map',
			//
			loadTilesWhileAnimating: true,
		});
	},
	//添加标签
	addLable:function(lon,lat,obj){
		var feature = new ol.Feature({
			// 经纬度转换成坐标信息
			geometry: new ol.geom.Point([lon,lat]),
			properties:obj
		})

		feature.setStyle(
			new ol.style.Style({
				// 标点的图片，如果要标不同类型的点，这个图片可以判断加
				image: new ol.style.Icon({
					//anchor: [0, 0],
					//anchorXUnits: 'fraction',
					//anchorYUnits: 'pixels',
					opacity: 1,
					src: "/map/images/"+obj.EleType+".png",
					scale: 1.1
				}),
				// 标点的文字
//		      text: new ol.style.Text({
//		        // 文字
//		        text: '',
//		        // 文字样式
//		        fill: new ol.style.Fill({
//		          color: 'red'
//		        }),
//		        font: '20px Calibri',
//		        // 偏移量
//		        offsetY: 20
//		      })
			})
		)
		// 将 feature 坐标信息添加在地图上
		Pointlayer.getSource().addFeature(feature);
	},
	getData:function(dataType,dataCategory){
		ui.popProcess();
		var config = {
			url:'/api/ld/'+dataType+"/"+dataCategory,
			data:{},
			callBackFunc:function(da){
				ui.shutProcess();
				if(da != null){
					//清除地图
					data.clearMap();
					//修改统计信息
					var msg = "Number of "+dataCategory+" element "+dataType+" data: "+da.length;
					$("#message").text(msg)
					for(var i = 0;i<da.length;i++){
						//这个位置显示所有样本数据
						var con = da[i];
						if(!isNaN(con.Longitude) && !isNaN(con.Latitude)){
							data.addLable(con.Longitude,con.Latitude,con)
						}
					}
				}
			},
			callBackErrorFunc:function(){}
		};
		HD.doPost(config);//提交
	},
	//清除地图元素
	clearMap:function(){
		Pointlayer.getSource().clear();//清除标点
		overlayToolp.setPosition(undefined);//清除详情标签
	}
}

$(function(){
	//创建地图
	data.createMap();
	//标点图层
	Pointlayer = new ol.layer.Vector({
		source: new ol.source.Vector({wrapX:false})
	})
	// 添加图层
	map.addLayer(Pointlayer);

	//创建弹出框容器
	overlayToolp = new ol.Overlay({
		//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
		autoPan: true,
		autoPanAnimation: {
			duration: 250
			//当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
		}
	});

	//这个位置将所有查询到的样本数据调用下面的for循环即可
	//var details =[{"PNo":1,"createTime":"2023-01-07 16:02:03.285","position":"116.433,39.9","detail":[{"name":"d15N","value":"0.312312"},{"name":"d18O","value":"0.312312"},{"name":"d12C","value":"0.312312"},{"name":"d14C","value":"0.312312"},{"name":"d13C","value":"0.312312"}],"id":"8ec492bbc0844fa1beb49b5864355f8e","type":3},{"PNo":1,"createTime":"2023-01-07 16:15:52.097","position":"116.533,40.0","detail":[{"name":"d15N","value":"0.312312"},{"name":"d18O","value":"0.312312"},{"name":"d12C","value":"0.312312"},{"name":"d14C","value":"0.312312"},{"name":"d13C","value":"0.312312"}],"id":"1aebecf3195e4229b7dd1b23bae2a13a","type":3}]
//	for(var i = 0;i<details.length;i++){
//		pos = details[i].position;
//		//这个位置显示所有样本数据
//		data.addLable(pos.split(",")[0],pos.split(",")[1],details[i])
//	}
	//点击显式点详细数据
	map.on('click', function (evt) {
		var flag = false;
		var coordinate = evt.coordinate;
		map.forEachFeatureAtPixel(evt.pixel,(feature) => {
			flag = true;
			//点击到对象
			var attr = feature.getProperties();
//			pos = attr.properties.position
//			detail = attr.properties.detail
			tips = "<ul>"
//			for(var i = 0;i<detail.length;i++){
//				tips+= '<li>'+detail[i].name+': ' + detail[i].value +'</li>'
//			}
			tips+= '<li>Element: ' + attr.properties.EleType +'</li>'
			tips+= '<li>IsotopeType: ' + getIFont(attr.properties.IsotopeType) +'</li>'
			if(dataType == 'PM'){
				tips+= '<li>PMType: ' + attr.properties.PMType +'</li>'
			}else{
				tips+= '<li>SOURCEType: ' + attr.properties.SourceType +'</li>'
			}
			tips+= '<li>Content: ' + attr.properties.Content +'</li>'
			tips+= '<li>Isotopic Composition: ' + attr.properties.Ic +'</li>'
			tips+= '<li>Isotopic Composition SD: ' + attr.properties.icsd +'</li>'
			tips+= '<li>n: ' + getIntVal(attr.properties.n) +'</li>'
			if(dataType == 'PM'){
				tips+= '<li>Concentration: ' + attr.properties.mc +'</li>'
				tips+= '<li>Concentration SD: ' + attr.properties.mcsd +'</li>'
			}
			tips+= '<li>SamplingDate: ' + attr.properties.SamplingDate +'</li>'
			tips+= '<li>Year: ' + getIntVal(attr.properties.Year) +'</li>'
			tips+= '<li>Season: ' + attr.properties.Season +'</li>'
			tips+= '<li>SamplingSite: ' + attr.properties.SamplingSite +'</li>'
			tips+= '<li>Nation: ' + attr.properties.Nation +'</li>'
			tips+= '<li>Region: ' + attr.properties.Region +'</li>'
			tips+= '<li>Longitude: ' + attr.properties.Longitude +'</li>'
			tips+= '<li>Latitude: ' + attr.properties.Latitude +'</li>'
			tips+= '<li>Laboratory: ' + attr.properties.Laboratory +'</li>'
			tips+= '<li>Reference: ' + attr.properties.Reference +'</li>'
			if(dataType == 'SOURCE'){
				tips+= '<li>Note: ' + attr.properties.Note +'</li>'
			}
			tips += "</ul>"
			document.getElementById("map_tips_content").innerHTML = tips;
			$("#map_tips").fadeIn(500);
		},{hitTolerance: 20});
	});
	//数据类型切换
	$(".pdata-tabs li").each(function(n,m){
		$(m).click(function(){
			//样式
			$(".pdata-tabs li").attr("class","");
			$(m).attr("class","pdata-tabs-cur");
			if(n == '0'){dataType = "PM"}
			if(n == '1'){dataType = "SOURCE"}
			//地图操作
			data.getData(dataType,dataCategory);
		})
	});
	//数据详细类型切换
	$(".pdata-menu li").each(function(n,m){
		$(m).click(function(){
			//修改样式
			if($(m).hasClass("pdata-menu-cur")){
				$(m).attr("class","");
				dataCategory = "all";
			}else{
				$(".pdata-menu li").attr("class","");
				$(m).attr("class","pdata-menu-cur");
				dataCategory = $(m).text();
			}
			data.getData(dataType,dataCategory);
		})
	})
	//默认请求数据
	data.getData(dataType,dataCategory);
	//跳转数据上传页
	$("#toUpload").click(function(){
		$(".n-nav-links a").eq(5).click();
	});
});

function getIntVal(v){
	if (v == '' || v == null){
		return '';
	}
	if (!isNaN(v)){
		return Math.trunc(v);
	}
	return v;
}

function getIFont(v){
	if (v.indexOf("δ") > -1){
		return v.replace("δ",`<span style="font-style:italic">δ</span>`);
	}

	if (v.indexOf("Δ") > -1){
		return v.replace("Δ",`<span style="font-style:italic">Δ</span>`);
	}
	return v;
}